<template>
  <div>
    <el-button type="primary" @click="multiplyPrintHandler" :disabled="haveChecked">批量打印</el-button>
    <!-- <el-button type="warning">全部打印</el-button>
    <el-button type="success">导出</el-button> -->

    <div class="table-default">
      <el-table :data="tableData" class="mt-3" v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="barcode" label="条码" />
        <el-table-column prop="supplierOrder" label="供应商单号" />
        <el-table-column prop="fmaterialid" label="物料代码" />
        <el-table-column prop="fmaterialname" label="物料名称" />
        <el-table-column prop="fsupplierid_number" label="物料代号" />

        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" @click="singlePrintHandler(scope.row)">打印</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>

    <!-- <print></print> -->

    <el-dialog v-model="barCodeVisible" title="条码预览" width="80%">
      <!-- <div ref="print" v-if="printingArr"> -->
        <barCodeVue :printingArr="printingArr"></barCodeVue>
      <!-- </div> -->
    </el-dialog>

    <!-- <Dialog v-model="visible" :title="title" destroy-on-close>
        <Create @close="close(reset)" :primary="id" :api="api" />
      </Dialog> -->
  </div>
</template>
  
  <script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
//   import Create from './create.vue'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useOpen } from '/admin/composables/curd/useOpen'
import http from '/admin/support/http'
import { useRouter } from 'vue-router'
import barCodeVue from './barCode first.vue'
import { getLodop } from '/admin/utils/LodopFuncs'
// import print from './print.vue'

let router = useRouter()

const props = defineProps({
  id: String,
})

const api = `purchasing/barcodeApi/${props.id}`

const barCodeVisible = ref(false)

const printingArr = ref([])
const haveChecked = ref(true)

let barcodeObj = ref({})
let isPrint = ref(false)

const getBarcodePrinting = Obj => {
  http.get('/purchasing/barcodePrinting/', Obj).then(r => {
    printingArr.value = r.data.data
    console.log(printingArr.value)
  })
}
const print = ref()

const { data, query, search, reset, loading } = useGetList(api)
const { destroy, deleted } = useDestroy()
const { open, close, title, visible, id } = useOpen()

const tableData = computed(() => data.value?.data)

const multipleSelection = ref([])

const handleClick = () => {
  const LODOP = getLodop()
  LODOP.PRINT_INIT('')
  // const content = ``;
  //  LODOP.ADD_PRINT_TEXT(50, 50, '60%', 30, content);

  // // LODOP.SET_PRINT_PAGESIZE(1, 2100, 2970, 'A4'); // 纸张方向大小
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 800, 800, '') // 演示设置各种样式的打印预览窗口：
  const htmlCode = print.value.innerHTML

  const styleCode =
    '<style>table {margin:0 auto ;text-align: center; border-collapse: separate; border-spacing: 0; } th { border: 1px solid black; padding: 8px; } td { border: 1px solid black; padding: 8px; }</style>'
  // print为要打印的html ID名称：
  LODOP.ADD_PRINT_HTM(20, 0, '100%', '100%', styleCode + htmlCode)
  //   直接打印
  // LODOP.PRINT()
  // 设计模式
  //  LODOP.PRINT_DESIGN()
  LODOP.PREVIEW() // 打印预览
}

// 选择框改变
const handleSelectionChange = val => {
  console.log(val)
  multipleSelection.value = val
  console.log(multipleSelection.value)
  // if(val){
  //   haveChecked.value = false
  // }else {
  //   haveChecked.value = true
  // }

  val.length == 0  ? haveChecked.value = true : haveChecked.value = false
}

// 单个打印
const singlePrintHandler = data => {
  barCodeVisible.value = true

  // console.log(data.barcode)
  let arr = []
  arr.push(data.barcode)
  // console.log(arr)
  barcodeObj.value.barcode = arr
  console.log(barcodeObj.value)
  getBarcodePrinting(barcodeObj.value)


}

// 批量打印
const multiplyPrintHandler = () => {
  let arr = []
  for (let i = 0; i < multipleSelection.value.length; i++) {
    arr[i] = {}
    arr[i] = multipleSelection.value[i].barcode
  }
  console.log(arr)

  barcodeObj.value.barcode = arr

  console.log(barcodeObj.value)
  getBarcodePrinting(barcodeObj.value)

  barCodeVisible.value = true

  // {
  //   barcode: [ 'QW20230524-0036', 'QW20230607-0002',]
  // }
}

onMounted(() => {
  search()
  deleted(reset)
})
</script>
  